<template>
	<van-pull-refresh v-model="isLoading" @refresh="onRefresh">
	<div class="content" ref="pageInfo">
		<div class="topTips">
			<div class="tips flex2">
				<div class="flex1" v-if='userInfo.pid' @click="showPicker=true">
					<div>就诊人 <span>{{userInfo.pat_name||''}}（{{userInfo.phno||''}}）</span></div>
					<img src="@/assets/img/index/more_w.png" alt="">
				</div>
				<div class="flex1" v-else @click="toPageLink('/addVisitor')">
					添加就诊人
					<img src="@/assets/img/index/more_w.png" alt="">
				</div>
			</div>
			<div class="topTips-marks flex2">
				温馨提示:报告文件比较大，点击报告下载后大约需要等待5-10秒左右，请不要反复点击报告下载按钮！
			</div>
		</div>
		<back-img></back-img>
		<div class="info">
	        <div v-if='dataList.length>0'>
				<div class="reportI flex1" v-for="(v,i) in dataList" :key='i'>
					<div class="reportI-name">报告时间：{{v.peisPersonalReportProduceTime||''}}</div>
				 	<div class="reportI-btn" @click="downPdf(v.peisNo)">报告下载</div>
				</div>
			</div>
			<div class="noData" v-if='dataList.length<=0'>
				<img class="noData-img" src="@/assets/img/index/nodata.png" alt="">
				<div class="noData-text">未查到数据</div>
			</div>
		</div>
		<van-popup v-model:show="showPicker" round position="bottom">
		  <van-picker
		    :show-toolbar='true'
		    :columns="columns"
			value-key='pat_name'
		    @cancel="showPicker = false"
		    @confirm="onConfirm"
		  />
		</van-popup>
		
		<van-popup v-model:show="showPicker" round position="bottom">
		  <van-picker
		    :show-toolbar='true'
			value-key='pat_name'
		    :columns="columns"
		    @cancel="showPicker = false"
		    @confirm="onConfirm"
		  />
		  <div class="addUser" @click="toPageLink('/addVisitor')">
			  <div class="addUser-btn flex3">新增就诊人</div>
		  </div>
		</van-popup>
		
		
		
	</div>
	</van-pull-refresh>
</template>

<script>
	export default {
		data() {
			return {
				isLoading: false,
				columns:[],
				userInfo:{},
				showPicker:false,
				
				dataList:[]
			};
		},
		created() {
			this.petList()
		},
		mounted(){
			
		},
		watch: {
			scrollTop(val){
				
			}
		},
		methods: {
			onRefresh() {
				this.getList()
				setTimeout(() => {
					this.isLoading = false;
				}, 500);
			},
			//下载
			// https://guahao.tcyy.org.cn/api/medicalExamReport?peisNo=xxx
			// 参数 peisNo 体检号  必须
			downPdf(id) {
				window.location.href = "https://guahao.tcyy.org.cn/api/medicalExamReport?peisNo="+id;
			},
			petList() {
				let that=this
				let url = "/api/pat/list";
				this.$axios.get(url).then(res => {
					that.columns = res.pat_info
					var user={}
					if(that.columns.length>0){
						that.columns.forEach((item, index) => {
							if(item.is_self){
								user=item
							}
						})
					}
					if(!user.id&&that.columns.length>0){
						user=that.columns[0]
					}
					that.userInfo=user
					if(that.userInfo.pid){
						that.getList()
					}
				})
				.catch(err => {
					console.log("err", err);
				});
			},
			// 24、查询患者的体检报告  GET       content-type   json
			//https://guahao.tcyy.org.cn/api/medicalExamList?pid=xxx
			//参数 pid 患者的ID  必须
			
			getList(){
				let that=this
				if(!that.userInfo.pid){
					return
				}
				var id=that.userInfo.pid
				let url = "/api/medicalExamList?pid="+id;
				this.$axios.get(url).then(res => {
					console.log(res,'体检报告')
					that.dataList=res.data
				}).catch(err => {
					console.log("err", err);
				});
			},
			onConfirm(e){
				this.showPicker=false
				this.dataList=[]
				this.userInfo=e
				this.getList()
			},
			toPageLink(url){
				this.$router.push({
					path:url,
					query:{},
				})
			},
		}
	};
</script>

<style lang="less" scoped>
	.addUser{
		padding: 18px 0;
		&-btn{
			width: 219px;
			height: 28px;
			background: linear-gradient(90deg, #5CD2A3 0%, #3EC6D9 100%);
			border-radius: 14px;
			font-size: 15px;
			font-family: Adobe Heiti Std;
			font-weight: normal;
			color: #FFFFFF;
		    margin:auto;
		}
	}
	.noData{
		margin: 95px auto;
		width: 158px;
		text-align: center;
		&-img{
			width: 158px;
			height:160px;
		}
		&-text{
			font-size: 15px;
			font-family: PingFang;
			font-weight: 500;
			color: #333333;
			margin-top: -20px;
		}
	}
	.content{
		min-height: 100vh;
		background-color:#f0f8f8;
		.topTips{
			position: fixed;
			top: 0;
			width: 375px;
			height:88px;
			&-marks{
			   height: 44px;
			   padding:0 18px;
			   background: #f8f2d8;
			   color: #f09b3a;
			   font-size: 12px;
			   line-height: 20px;
			}
		}
		.tips{
			width: 375px;
			height: 44px;
			padding:0 18px;
			background: linear-gradient(-90deg, #68E198 0%, #13BAB8 100%);
			font-size: 15px;
			font-family: MiSans;
			font-weight: 500;
			color: #FFFFFF;
			span{
				margin-left: 23px;
			}
			img{
				width: 20px;
			}
		}
		.info{
			padding-top:88px;
			.reportI{
				margin: 0 15px;
				padding:15px 0;
				color:#333;
				border-top: 1px solid #ededed;
				&-name{
					font-size:15px;
				}
				&-btn{
				  border-radius:8px;
				  background: linear-gradient(90deg, #5CD2A3 0%, #3EC6D9 100%);
				  width: 80px;
				  height: 22px;
				  font-size:13px;
				  text-align: center;
				  line-height:22px;
				  color: #fff;
				}

			}
		}
		
	}
</style>